<template>
  <div class="app-container">
    <q-form @register="registerQueryForm" />
    <div class="buttons" style="margin-bottom: 16px">
      <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
      <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
    </div>
    <q-table @register="registerTable">
      <template #operation="{ rowData }">
        <el-button type="primary" size="small" @click="onEdit(rowData)">编辑</el-button>
        <el-button type="danger" size="small" @click="onDelete(rowData)">删除</el-button>
      </template>
    </q-table>
    <q-drawer @register="registerDrawer" @ok="onDrawerOk" @cancel="closeDrawer">
      <q-form @register="registerForm" />
    </q-drawer>
  </div>
</template>

<script setup>
import QTable from '@/components/Q/QTable/QTable.vue'
import useTable from '@/components/Q/QTable/hooks/useTable.js'
import QForm from '@/components/Q/QForm/QForm.vue'
import useForm from '@/components/Q/QForm/hooks/useForm.js'
import sizeApi from '@/api/base/size/size.js'
import QDrawer from '@/components/Q/QDrawer/QDrawer.vue'
import useDrawer from '@/components/Q/QDrawer/hooks/useDrawer.js'
import { ElMessage } from 'element-plus'
import { download } from '@/utils/request.js'

const [registerQueryForm, { getForm: getQueryForm }] = useForm({
  isFilter: true,
  config: [
    {
      col: 4,
      label: '尺码名称',
      prop: 'sizeName',
      type: 'text'
    },
    {
      col: 4,
      label: '创建日期',
      prop: 'createTime',
      type: 'date'
    }
  ],
  onSearch: () => reload(),
  onReset: () => reload()
})

const [registerTable, { reload }] = useTable({
  rowKey: 'sizeId',
  columns: [
    { label: '尺寸名称', prop: 'sizeName' },
    { label: '尺寸编码', prop: 'sizeCode' },
    { label: '助记码', prop: 'mnemonicCode' },
    { label: '创建时间', prop: 'createTime' },
    {
      label: '操作',
      prop: 'operation',
      slotName: 'operation'
    }
  ],
  getFilter: getQueryForm,
  listApi: sizeApi.getList
})

const [registerDrawer, { openDrawer, closeDrawer, setOkButtonLoading, setLoading }] = useDrawer()

const [registerForm, { validate, getForm, setForm }] = useForm({
  config: [
    {
      col: 4,
      label: '尺寸名称',
      prop: 'sizeName',
      type: 'text',
      rules: [{ required: true, message: '请输入尺码尺寸', trigger: 'blur' }]
    },
    { col: 4, label: '尺码编码', prop: 'sizeCode', type: 'text' },
    { col: 4, label: '助记码', prop: 'mnemonicCode', type: 'text' },
    { col: 4, label: '备注', prop: 'remark', type: 'text' }
  ]
})

const onDelete = async rowData => {
  try {
    const res = await sizeApi.delete(JSON.stringify([rowData.sizeId]))
    ElMessage.success(res.msg)
    reload()
  } catch (e) {
    ElMessage.success('操作失败')
  }
}

const onEdit = async rowData => {
  openDrawer({ title: '编辑尺码' })
  setLoading(true)
  const res = await sizeApi.getInfo(rowData.sizeId)
  setForm(res.data)
  setLoading(false)
}

const onAdd = () => {
  openDrawer({ title: '新增尺码' })
}

const handleExport = () => {
  download('/erp/size/export', {}, `size_${new Date().getTime()}.xlsx`)
}

const onDrawerOk = async () => {
  const valid = await validate()
  if (valid) {
    try {
      setOkButtonLoading(true)
      const formData = getForm()
      let res
      if (formData.sizeId > 0) {
        res = await sizeApi.update(formData)
      } else {
        res = await sizeApi.add(formData)
      }
      ElMessage.success(res.msg)
      closeDrawer()
      reload()
    } catch (e) {
      ElMessage.success('操作失败')
    } finally {
      setOkButtonLoading(false)
    }
  }
}
</script>

<style scoped lang="scss"></style>
